import {Component, OnInit, Output, Input, EventEmitter, forwardRef, AfterViewInit, OnChanges} from '@angular/core';
import {ControlValueAccessor} from '@angular/forms/src/directives';
import {NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
    selector: 'kylin-input-group',
    templateUrl: './input-group.component.html',
    styleUrls: ['./input-group.component.css'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => InputGroupComponent),
            multi: true
        }
    ]
})
export class InputGroupComponent implements OnInit, ControlValueAccessor, AfterViewInit, OnChanges {

    @Input() type = '度';
    @Input() ngModel: string;
    @Output() ngModelChange = new EventEmitter<string>();
    @Output() valueChange = new EventEmitter<string>();
    private _degree = ''; // 度
    private _minute = ''; // 分
    private _second = ''; // 秒

    private target1 = '°';
    private target2 = '′';
    private target3 = '″';

    get degree() {
        return this._degree;
    }

    set degree(value: string) {
        this._degree = value;
        setTimeout(() => {
            const result = this.getValue();
            this.ngModelChange.emit(result);
            this.onChangeCallback(result);
            this.valueChange.emit(result);
        }, 0);
    }

    get minute() {
        return this._minute;
    }

    set minute(value: string) {
        this._minute = value;
        setTimeout(() => {
            const result = this.getValue();
            this.ngModelChange.emit(result);
            this.onChangeCallback(result);
            this.valueChange.emit(result);
        });
    }

    get second() {
        return this._second;
    }

    set second(value: string) {
        this._second = value;
        setTimeout(() => {
            const result = this.getValue();
            this.ngModelChange.emit(result);
            this.onChangeCallback(result);
            this.valueChange.emit(result);
        });
    }


    constructor() {
    }

    private onTouchedCallback: () => void = function () {
    };
    private onChangeCallback: (_: any) => void = function () {
    };

    writeValue(value: string) {
        if (value !== this.degree) {
            if (value !== null) {
                this.setValue(value);
            }
        }
    }

    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }


    ngOnChanges(event) {
        if (event.type) {
            if (!event.type.firstChange) {
                const typeCurrentValue = event.type.currentValue;
                switch (typeCurrentValue) {
                    case '度':
                        setTimeout(() => {
                            this.minute = '';
                            this.second = '';
                        }, 0);
                        break;
                    case '度分':
                        setTimeout(() => {
                            this.second = '';
                        }, 0);
                        break;
                    default:
                        break;
                }
            }
        }
    }

    ngOnInit() {
    }

    ngAfterViewInit() {

    }

    private getValue(): string {
        let result = '';
        if (this.degree) {
            result += this.degree + this.target1;
        }
        if (this.minute) {
            result += this.minute + this.target2;
        }

        if (this.second) {
            result += this.second + this.target3;
        }
        return result;
    }

    private setValue(value: string) {
        let data = value;
        if (data.indexOf(this.target1) !== -1) {
            const arr = data.split(this.target1);
            this.degree = arr[0];
            this.minute = '';
            this.second = '';
            data = arr[1];
        }
        if (data.indexOf(this.target2) !== -1) {
            const arr = data.split(this.target2);
            this.minute = arr[0];
            this.second = '';
            data = arr[1];
        }
        if (data.indexOf(this.target3) !== -1) {
            const arr = data.split(this.target3);
            this.second = arr[0];
        }
    }
}
